Skip to content

Feature/youtube buttons#2388

Open
bwhalley wants to merge 5 commits into
mbnuqw:v5from
bwhalley:feature/youtube-buttons
Open

Feature/youtube buttons#2388
bwhalley wants to merge 5 commits into
mbnuqw:v5from
bwhalley:feature/youtube-buttons

Conversation

@bwhalley

Copy link
Copy Markdown

As described in a discussion thread. Adds a basic YouTube player interface to the bottom of the panel bar. The bar is defaulted off and controlled through a settings panel. I included a best try at some basic translations for the new UI elements. I tried to keep the code as tight as possible here, while supporting a range of YouTube player URLs.
This could also be easily extended to any media player instead.

image image

Add optional bottom YouTube bar (setting subPanelYouTube) with prev,
play/pause, next, and tab mute. Targets audible YouTube watch/shorts/
youtu.be tabs, or paused tabs after Sidebery media control. Uses
existing play/pause media injections and executeScript for YTP
buttons. Dock layout preserves bottom bar spacing in tab panels.

Made-with: Cursor
…ttom bar

Use tab.url with URL() host/path checks (m.youtube, music, live, embed).
Subscribe to reactive.active for Vue updates. Prefer audible, then Sidebery-
paused, then active playback URL for muted/delayed audible. Move YouTube
dock above BottomBar; override flex so controls stay on one row.

Made-with: Cursor
Poll browser.tabs.query(audible) on tab events and interval; prefer that
tab id over Sidebery heuristics. Fall back to active window tab on playback
URLs. Register listeners after Tabs.load; wrap state with reactivate().
Replace rotated arrow-down with chevron-left/right SVG sprites.

Made-with: Cursor
Remove no_playing copy and hint block; simplify youtube.fg comments and
log lines, unexport tabUrl, reuse onActivated handler for probe, 3s poll.

Made-with: Cursor
@FurkanKambay

Copy link
Copy Markdown
Contributor

looking forward to this one!

some things I'd love to see in the future for this:

  • option to display the thumbnail + icon of website (to identify youtube, twitch, etc.)
  • support multiple with a scroll UI (I imagine some dots on the right and vertical slide animations)
  • pop-out player button

'bar.youtube.mute': {
en: 'Mute tab',
de: 'Tab stummschalten',
fr: 'Couper le son de l’onglet',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using YouTube's own translations would be much better for correctness and consistency.

Picking this one just as an example. YouTube's translation is "Désactiver le son". The addition of de l'onglet is a separate decision, which might be worth discussing as well.

Missing languages should be easy to add too, but I'm not sure what the Chinese ones correspond to on YouTube's language list which has Simplified, Traditional, and Hong Kong

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants